<template>
    <div class="manual-dispatch">
        <popup
            ref="popupRef"
            :title="companyName"
            :async="true"
            width="500px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                label-width="100px"
                class="mt-4"
            >
                <el-form-item label="成功数" prop="success">
                    <el-input
                        v-model.number="formData.success_num"
                        type="number"
                        placeholder="请输入成功数"
                        class="w-full"
                    />
                </el-form-item>
                <el-form-item label="评论数" prop="comment">
                    <el-input
                        v-model.number="formData.comment_num"
                        type="number"
                        placeholder="请输入评论数"
                        class="w-full"
                    />
                </el-form-item>
                <el-form-item label="投诉数" prop="complaint">
                    <el-input
                        v-model.number="formData.complaint_num"
                        type="number"
                        placeholder="请输入投诉数"
                        class="w-full"
                    />
                </el-form-item>
                <el-form-item label="取消数" prop="cancel">
                    <el-input
                        v-model.number="formData.cancel_num"
                        type="number"
                        placeholder="请输入取消数"
                        class="w-full"
                    />
                </el-form-item>
                <el-form-item label="违约数" prop="breach">
                    <el-input
                        v-model.number="formData.break_num"
                        type="number"
                        placeholder="请输入违约数"
                        class="w-full"
                    />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import { defineEmits, defineExpose, reactive, shallowRef } from 'vue'
import { manualDispatch } from '@/api/supervise/company'

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const companyName = ref('')
const formData = reactive({
    company_id: 0,
    success_num: 1,
    comment_num: 0,
    complaint_num: 0,
    cancel_num: 0,
    break_num: 0
})

const formRules = {
    success_num: [
        { required: true, message: '请输入成功数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    comment_num: [
        { required: true, message: '请输入评论数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    complaint_num: [
        { required: true, message: '请输入投诉数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    cancel_num: [
        { required: true, message: '请输入取消数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ],
    break_num: [
        { required: true, message: '请输入违约数', trigger: 'blur' },
        { type: 'number', min: 0, message: '必须为非负数', trigger: 'blur' }
    ]
}

const handleClose = () => {
    formRef.value?.resetFields()
    emit('close')
}

const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate(async (valid:boolean) => {
        if (valid) {
            try {
                manualDispatch(formData)
                feedback.msgSuccess('添加成功')
                emit('success')
                handleClose()
            } catch (error) {
                console.error(error)
            }
        }
    })
}

defineExpose({
    show: (row:any) => {
        // formRef.value?.resetFields()
        // formData.success_num = 1
        // formData.comment_num = 0
        // formData.complaint_num = 0
        // formData.cancel_num = 0
        // formData.break_num = 0
        formData.company_id = row.id
        companyName.value = row.company_name
        popupRef.value?.open()
    }
})
</script>

<style lang="scss" scoped>
.manual-dispatch {
    :deep(.el-dialog__body) {
        padding: 20px;
    }
}
</style>